<template>
    <div>
        <!-- 1.按钮操作区域 添加 批量删除-->
        <div class="but">
            <el-button size="mini" type="primary" @click="buffer.isShow=true">添加</el-button>
            <el-button size="mini" type="warning">批量删除</el-button>
        </div>
        <!-- 2.数据列表区域 -->
        <list-comp  :goodList="goodList"  :params="params"  @channel="getGoodList" @edit="editGood" @remove="removeGood"></list-comp>
         <!-- 3.表单区域 -->
        <form-comp :buffer="buffer"  ref="formRef" :specsList="specsList" :cateList="cateList" @channel="getGoodList"></form-comp>
    </div>
</template>

<script>
import formComp from "./components/Form.vue"
import listComp from "./components/List.vue"
export default {
    components: {
        listComp,formComp
    },
    data() {
        return {
            goodList:[],//商品列表数据
            cateList:[],//商品分类列表数据
            specsList:[],//商品规格数据
            params:{
                page:1,
                size:5,
                total:0
            },
             buffer:{
                isShow:false
            }
        };
    },
    mounted() {
        // 1.获取商品分页数据
        this.getGoodList()
        // 2.获取全部商品分类数据
        this.getCateList()
        // 3.获取商品规格
        this.getSpecsList()
    },
    methods: {
        // 1.获取商品分页数据
        getGoodList(){
            //1.1解构获取请求参数
            let {page,size} = this.params
            this.$api.reqGoodList({page,size})
            .then(res=>{
                this.goodList = res ? res : []
            })
            .catch(err=>console.log(err))

            //1.2获取商品的总条数
            this.$api.reqGoodCount()
            .then(res=>{
                this.params.total =res[0].total
            })
            .catch(err=>console.log(err))
        },
        // 2.获取全部商品分类数据
        getCateList(){
            this.$api.reqCateList({istree:true})
            .then(res=>{
                this.cateList = res ? res :[] 
            })
            .catch(err=>console.log(err))
        },
        // 3.获取商品规格
        getSpecsList(){
            this.$api.reqSpecsList({page:1,size:10})
            .then(res=>{
                this.specsList = res ? res :[];
                console.log(res);
            })
            .catch(err=>console.log(err))
        },
        // 4.修改商品数据
        editGood(info){
            // 4.1解构获取修改的商品数据
            let {index,row} = info

            // 4.2删除无用的修改字段
            delete row.firstcatename
            delete row.secondcatename
            delete row.number
            // 4.3转义获取需要修改的旧数据
            let editData = JSON.parse(JSON.stringify(row))
            // 4.4通过操作表单组件中的切换一级分类的事件来获取二级分类数据
            this.$refs.formRef.changeCate(editData.first_cateid)
            // 4.5设置上传图片展示的默认路径
            this.$refs.formRef.imageUrl = this.$pre + editData.img
            // 4.6通过操作表单组件中的切换商品规格的事件来获取商品属性值数据
            this.$refs.formRef.changeAttr(editData.specsid)
            //"白色,黑色"==>['白色','黑色']
            editData.specsattr = editData.specsattr.split(',')
            // 4.7将编辑数据赋值给修改表单并展示
            this.$refs.formRef.form = editData
            // 4.8弹窗表单窗口
            this.buffer.isShow = true;
        },

        //5.删除商品
        removeGood(info){
            let {index,row} = info

            //3.2提示用户是否删除
      this.$confirm("确定要删除吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //3.2用户同意删除
          this.$api
            .reqGoodRemove({ id: row.id })
            .then((res) => {
              //3.4提示删除成功
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              //3.5更新列表 重新获取列表数据
              this.getGoodList();
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {});
        }
    },
};
</script>

<style scoped>
 /* 顶部按钮操作区域样式 */
    .but{
        margin: 20px 0;
    }
</style>
